window.onload = function() {

	var lrc
	var index = 0
	var gecilist = []
	for (let i = 0; i < 5; i++) {
		let a = i
		a = document.getElementById("tex" + (i + 1))
		gecilist.push(a)
	} //把所有textarea添加进gecilist数组
	var gunzhou = document.getElementById("gunzhou")
	var names = ["春娇与志明", "Young And Beautiful", "溯 (Reverse)", "日不落", "山楂树之恋"]
	var musics = document.getElementById("music")
	var imgs = ["春娇与志明", "yab", "溯", "日不落", "暂无"]
	var musiclist = ["春娇与志明", "young and beautiful", "溯", "日不落", "山楂树之恋"]
	var bofanganniu = document.getElementById("bofang")
	var ge = document.getElementById("geci")
	var jindutiao = document.getElementById("jindutiao")
	var xunhuan = document.getElementById("xunhuan")
	var qiehuan = document.getElementById("qiehuan")
	var zhuyemian = document.getElementById("zhuyemian")
	var fengmian = document.getElementById("fengmian")
	var ci = document.getElementById("ci")
	var mingzi = document.getElementById("mingzi1")
	var kongzhilan = document.getElementById("kongzhilan")
	var keshihua = document.getElementById("keshihua")
	var mycanvas = document.getElementById("mycanvas")
	var canvasContext = mycanvas.getContext("2d")
	var qiehuan = document.getElementById("qiehuan")
	var body = document.getElementsByTagName("body")
	//可视化音乐
	//创建管理关联音频输入，对音频进行解码、控制音频的播放暂停等基础操作
	const ctx = new AudioContext
	//创建 AnalyserNode
	const analyser = ctx.createAnalyser()
	analyser.fftSize = 512
	// 通过<audio>节点创建音频源
	const source = ctx.createMediaElementSource(musics)
	// 将音频源关联到分析器
	source.connect(analyser);
	// 将分析器关联到输出设备（耳机、扬声器）
	analyser.connect(ctx.destination)
	const bufferLength = analyser.frequencyBinCount
	const dataArray = new Uint8Array(bufferLength)
	//创建渐变线条
	var line = canvasContext.createLinearGradient(0,0,0,600)
	line.addColorStop(0,"pink")
	line.addColorStop(0,"white")
	line.addColorStop(1,"skyblue")
	canvasContext.fillStyle = line
	//定时重绘canvas
	setInterval(function(){
		analyser.getByteFrequencyData(dataArray)
		draw(dataArray)
	},100)
	function draw(arr){
		canvasContext.clearRect(0,0,800,600)
		var w = 800/128
		for(var i=0;i<128;i++){
			var h = arr[i]/256*300
			canvasContext.fillRect(w*i,600-h,w*0.6,h)
		}
	}
	var yes = true
	qiehuan.onclick = function() {
		if (yes) {
			zhuyemian.style.height = "60px"
			kongzhilan.style.transform = "translateY(-700px)"
			keshihua.style.display = "block"
			qiehuan.style.backgroundPositionX="30px"
			yes = false
		} else {
			zhuyemian.style.height = "770px"
			kongzhilan.style.transform = "translateY(0)"
			qiehuan.style.backgroundPositionX="0"
			keshihua.style.display = "none"
			yes = true
		}
	}

	//播放基础逻辑和控件逻辑
	function gensui() {
		var shijian = setInterval(function() {
			let a = musics.currentTime
			let zongtime = musics.duration //获取歌曲总时间
			gunzhou.style.left = 540 * (a / zongtime) + "px"
			document.getElementById("mask").style.width = 540 * (a / zongtime) + "px"
		}, 1000)
	}
	bofanganniu.onclick = function() {
		if (musics.paused) {
			musics.play()
			bofanganniu.style.backgroundPositionX = "-50px"
			document.getElementById("fengmiantupian").style.animationPlayState = "running"
		} else {
			musics.pause()
			bofanganniu.style.backgroundPositionX = "0"
			document.getElementById("fengmiantupian").style.animationPlayState = "paused"
		}
	} /*播放按钮*/

	function QieGe() {
		musics.src = "music/" + musiclist[index] + ".mp3"
		document.getElementById("fengmiantupian").src = "img/" + imgs[index] + ".jpg"
		document.getElementById("fengmiantupian").style.animationPlayState = "running"
		document.getElementById("fengmiantupian").style.transform = "rotate(0deg)"
		document.getElementById("mingzi").innerHTML = names[index]
		document.getElementById("geci").style.top = 0
		musics.play()
		//gensui()
	} //封装切歌代码

	document.getElementById("next").onclick = function() {
		index++
		if (index == names.length) {
			index = 0
		}
		bofanganniu.style.backgroundPositionX = "-50px"
		QieGe()
		gecitongbu()
	} /*下一首*/

	document.getElementById("front").onclick = function() {
		index = index - 1
		if (index == -1) {
			index = names.length - 1
		}
		bofanganniu.style.backgroundPositionX = "-50px"
		QieGe()
		gecitongbu()
	} /*上一首*/
	function gecitongbu() {
		lrc = gecilist[index].value //[00:00.01]春娇与志明 - 街道办/欧阳耀莹
		var lrcArr = lrc.split("[") //00:00.01]春娇与志明 - 街道办/欧阳耀莹
		var html = ""
		for (var i = 0; i < lrcArr.length; i++) {
			var arr = lrcArr[i].split("]") //["00:00.01", "春娇与志明 - 街道办/欧阳耀莹"]
			var time = arr[0].split(".") //["00:00"."01"]
			var timer = time[0].split(":") //["00","00"]
			var ms = timer[0] * 60 + timer[1] * 1
			var text = arr[1] //text=春娇与志明 - 街道办/欧阳耀莹
			if (text) {
				html += "<p id=" + ms + ">" + text + "</p>"
			}
			//<p id="0">春娇与志明 - 街道办/欧阳耀莹</p>
			document.getElementById("geci").innerHTML = html /*获取歌词*/
		}
	}

	function Tongbu() {
		gecitongbu()
		var num = 0
		var oP = ge.getElementsByTagName("p")
		var curTime
		oP[0].style.fontSize = "20px"
		oP[0].style.marginBottom = "20px"
		musics.addEventListener("timeupdate", function() {
			curTime = parseInt(this.currentTime)
			if (document.getElementById(curTime)) {
				for (var i = 0; i < oP.length; i++) {
					oP[i].style.cssText = "font-size: 15px;"
				}
				document.getElementById(curTime).style.cssText = "color: lawngreen;font-size: 20px;"
				oP[0].style.cssText = "font-size: 20px;"
				if (document.getElementById(curTime).offsetTop > 250) {
					ge.style.top = (document.getElementById(curTime).offsetTop - 250) * (-1) + "px"
				}
			}
		}) /*歌词同步变色*/
	} /*封装歌词同步函数*/
	function ends() {
		musics.src = "music/" + musiclist[index] + ".mp3"
		document.getElementById("fengmiantupian").src = "img/" + imgs[index] + ".jpg"
		document.getElementById("geci").style.top = 0
		document.getElementById("mingzi").innerHTML = names[index]
		gunzhou.style.left = 0
		document.getElementById("mask").style.width = 0
		musics.play()
		document.getElementById("fengmiantupian").style.animationPlayState = "running"
		gecitongbu()
	}

	function liebiaoxunhuan() {
		index = index + 1
		if (index == names.length) {
			index = 0
		}
		ends()
		console.log("这是列表循环")
	}

	function suijixunhuan() {
		let a = index
		index = Math.floor(Math.random() * musiclist.length)
		console.log("这是随机")
		ends()
	}

	function danquxunhuan() {
		let a = index
		index = a
		ends()
		console.log("这是单曲循环")
	}

	function shunxubofang() {
		console.log("这是顺序播放")
		index = index + 1
		if (index == names.length) {
			index = names.length
			musics.onended = null
			alert('此曲是最后一首哦')
			return
		}
		ends()
	}
	musics.onended = function() {
		shunxubofang()
	}
	/*结束事件*/

	var xunhuanpos = ["-240px", "-210px", "-180px", "-270px"]
	var xunhuannum = 1
	xunhuan.onclick = function() {
		if (xunhuannum == 0) { //顺序播放
			xunhuan.style.backgroundPositionX = xunhuanpos[xunhuannum]
			musics.removeEventListener("ended", liebiaoxunhuan)
			musics.addEventListener("ended", shunxubofang)
			document.getElementById("next").removeEventListener("click", liebiaoxunhuan)
			document.getElementById("next").addEventListener("click", shunxubofang)
			xunhuannum++
		} else if (xunhuannum == 1) { //单曲循环
			xunhuan.style.backgroundPositionX = xunhuanpos[xunhuannum]
			musics.onended = null
			document.getElementById("next").onclick = null
			musics.removeEventListener("ended", shunxubofang)
			musics.addEventListener("ended", danquxunhuan)
			document.getElementById("next").removeEventListener("click", shunxubofang)
			document.getElementById("next").addEventListener("click", danquxunhuan)
			xunhuannum++
		} else if (xunhuannum == 2) { //随机播放
			xunhuan.style.backgroundPositionX = xunhuanpos[xunhuannum]
			musics.removeEventListener("ended", danquxunhuan)
			musics.addEventListener("ended", suijixunhuan)
			document.getElementById("next").removeEventListener("click", danquxunhuan)
			document.getElementById("next").addEventListener("click", suijixunhuan)
			xunhuannum++
		} else { //列表循环
			xunhuan.style.backgroundPositionX = xunhuanpos[3]
			musics.removeEventListener("ended", suijixunhuan)
			musics.addEventListener("ended", liebiaoxunhuan)
			document.getElementById("next").removeEventListener("click", suijixunhuan)
			document.getElementById("next").addEventListener("click", liebiaoxunhuan)
			xunhuannum = 0
		}
	}
	//循环事件
	Tongbu()
	gensui()
	gunzhou.onmousedown = function(e) {
		var x = e.pageX - gunzhou.offsetLeft
		document.addEventListener("mousemove", gundong)

		function gundong(e) {
			if ((e.pageX - x) < 0) {
				gunzhou.style.left = 0
				mask.style.width = 0
			} else if ((e.pageX - x) > 546) {
				gunzhou.style.left = 546 + "px"
				mask.style.width = 546 + "px"
			} else {
				gunzhou.style.left = e.pageX - x + "px"
				mask.style.width = e.pageX - x + "px"
			}
			musics.currentTime = musics.duration * (parseInt(mask.style.width) / 550)
		}
		musics.muted = true
		document.onmouseup = function() {
			musics.muted = false
			document.removeEventListener("mousemove", gundong)
		}
	} //进度条拖动
	var yinlianganniu = document.getElementById("yinlianganniu")
	var musicbtn2 = document.getElementById("yinliangtiao2")
	var yinliangtiao = document.getElementById("yinliangtiao")
	var yinliangzhi = document.getElementById("yinliangzhi")
	var btnif = true
	window.onclick = function() {
		btnif = true
		yinliang.style.overflow = "hidden"
	}
	yinlianganniu.onmousedown = function(e) {
		var y = e.pageY - yinlianganniu.offsetTop + yinlianganniu.offsetHeight / 2
		document.addEventListener("mousemove", gundong1)

		function gundong1(e) {
			if (e.pageY - y < 0) {
				yinlianganniu.style.top = 0 + "px"
			} else if (e.pageY - y > 65) {
				yinlianganniu.style.top = 65 + "px"
			} else {
				yinlianganniu.style.top = (e.pageY - y) + "px"
			}
			musicbtn2.style.height = yinlianganniu.style.top
			musics.volume = 1 - (parseInt(yinlianganniu.style.top) / 65)
			yinliangzhi.innerHTML = ""
			yinliangzhi.innerHTML = Math.floor((1 - (parseInt(yinlianganniu.style.top) / 65)) * 100) + "%"
			document.onmouseup = function() {
				document.removeEventListener("mousemove", gundong1)
			}
		}
	} //音量条拖动
	yinliang.onclick = function(e) {
		e.stopPropagation()
		if (btnif) {
			yinliang.style.overflow = "visible"
			btnif = false
		} else {
			yinliang.style.overflow = "hidden"
			btnif = true
		}
	} //音量条显示

}
